<template>
  <!-- 评分排名  :color="['#2290fe', '#2290fe']"-->
  <div class="gradeRanking">
    <dv-border-box-1
      backgroundColor="rgba(5, 29, 53, 0.9)"
      class="dv-border-box-1"
    >
      <span class="cleanCar-content-right-title">评分排名</span>
      <div class="cleanCar-content-calendar">
        <el-row :gutter="10">
          <el-col :span="12">
            <dv-border-box-7
              :color="['#0b275c', '#2290fe']"
              class="cleanCar-content-left-score-data-left-mapPage"
              >前置摄像头</dv-border-box-7
            >
          </el-col>
          <el-col :span="12">
            <dv-border-box-7
              :color="['#0b275c', '#2290fe']"
              class="cleanCar-content-left-score-data-left-mapPage"
              >后置摄像头</dv-border-box-7
            >
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="fontSize2">
              {{ carData.headScoreNameFirst }}
            </div>
            <el-progress
              stroke-color="['#2290FE']"
              class="percent"
              :percentage="
                carData.headScoreFirst != undefined
                  ? parseFloat(carData.headScoreFirst.toFixed(2))
                  : 0
              "
            >
              <span class="span">{{
                carData.headScoreFirst != undefined
                  ? parseFloat(carData.headScoreFirst.toFixed(2))
                  : 0
              }}</span>
            </el-progress>
            <div class="fontSize2">
              {{ carData.headScoreNameLast }}
            </div>
            <el-progress
              stroke-color="['#30F6FF']"
              class="percentage"
              :percentage="
                carData.headScoreLast != undefined
                  ? parseFloat(carData.headScoreLast.toFixed(2))
                  : 0
              "
            >
              <span class="span">{{
                carData.headScoreLast != undefined
                  ? parseFloat(carData.headScoreLast.toFixed(2))
                  : 0
              }}</span></el-progress
            >
          </el-col>
          <el-col :span="12">
            <div class="fontSize2">
              {{ carData.backScoreNameFirst }}
            </div>
            <el-progress
              stroke-color="['#2290FE']"
              :percentage="
                carData.backScoreFirst != undefined
                  ? parseFloat(carData.backScoreFirst.toFixed(2))
                  : 0
              "
              class="percentage"
            >
              <span class="span">{{
                carData.headScoreLast != undefined
                  ? parseFloat(carData.backScoreFirst.toFixed(2))
                  : 0
              }}</span></el-progress
            >
            <div class="fontSize2">
              {{ carData.backScoreNameLast }}
            </div>
            <el-progress
              stroke-color="['#30F6FF']"
              :percentage="
                carData.backScoreLast != undefined
                  ? parseFloat(carData.backScoreLast.toFixed(2))
                  : 0
              "
              class="percentage"
            >
              <span class="span">{{
                carData.backScoreLast != undefined
                  ? parseFloat(carData.backScoreLast.toFixed(2))
                  : 0
              }}</span></el-progress
            >
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 8px; font-size: 12px">
          <el-col :span="12">
            <dv-border-box-7
              :color="['#0b275c', '#2290fe']"
              class="cleanCar-content-left-score-data-left-mapPage"
              >左侧摄像头</dv-border-box-7
            >
          </el-col>
          <el-col :span="12">
            <dv-border-box-7
              :color="['#0b275c', '#2290fe']"
              class="cleanCar-content-left-score-data-left-mapPage"
              >右侧摄像头</dv-border-box-7
            >
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <div class="fontSize2">
              {{ carData.leftCountNameFirst }}
            </div>
            <p
              class="colorStyle"
              :style="{
                color:
                  carData.leftCountFirst > carData.leftCountLast
                    ? 'red'
                    : ['#0de40d'],
              }"
            >
              洒落物总数：{{
                carData.leftCountFirst != undefined
                  ? carData.leftCountFirst
                  : 0
              }}个
            </p>

            <div class="fontSize2">
              {{ carData.leftCountNameLast }}
            </div>
            <p
              class="colorStyle"
              :style="{
                color:
                  carData.leftCountFirst < carData.leftCountLast
                    ? 'red'
                    : ['#0de40d'],
              }"
            >
              洒落物总数：{{
                carData.leftCountLast != undefined ? carData.leftCountLast : 0
              }}个
            </p>
          </el-col>
          <el-col :span="12">
            <div class="fontSize2">
              {{ carData.rightCountNameFirst }}
            </div>
            <p
              class="colorStyle"
              :style="{
                color:
                  carData.rightCountFirst > carData.rightCountLast
                    ? 'red'
                    : ['#0de40d'],
              }"
            >
              洒落物总数：{{
                carData.rightCountNameFirst != undefined
                  ? carData.rightCountFirst
                  : 0
              }}个
            </p>
            <div class="fontSize2">
              {{ carData.rightCountNameLast }}
            </div>
            <p
              class="colorStyle"
              :style="{
                color:
                  carData.rightCountFirst < carData.rightCountLast
                    ? 'red'
                    : ['#0de40d'],
              }"
            >
              洒落物总数：{{
                carData.rightCountLast != undefined
                  ? carData.rightCountLast
                  : 0
              }}个
            </p>
          </el-col>
        </el-row>
      </div>
      <br />
    </dv-border-box-1>
  </div>
</template>
<script lang="ts">
export default {
  props: ["carData"],
};
</script >
<style lang="less" scoped>
.gradeRanking {
  // margin: 20px;
  box-sizing: border-box;
  // position: absolute;
  // left: 10px;
  // top: 20%;
  // width: 450px;
  // height: 47%;
  white-space: nowrap;
  // padding:2rem 0;
}
.cleanCar-content-calendar {
  padding-left: 2rem;
  // padding: 0 2rem;
  box-sizing: border-box;
  color: white;
  // text-align: center;
  // font-size: 16px;
}
.cleanCar-content-left-score-data-left-mapPage {
  text-align: center;
  font-size: 15px;
  width: 120px;
  padding: 6px;
  // line-height: 30px;
  color: #2290fe;
  font-weight: bold;
  background-color: #0b275c;
}
.cleanCar-content-right-title {
  display: block;
  width: 66%;
  padding: 24px 0;
  font-weight: bolder;
  margin-top: 10px;
  color: #2290fe;
  font-size: 20px;
  background-image: url("../../../../../assets/images/sweepercar/blueImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  margin: 0 auto;
}
.gradeRanking /deep/ .el-progress__text {
  color: white;
}
.fontSize2 {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  margin-top: 10px;
}
.percentage {
  width: 90%;
}
.gradeRanking /deep/ .ivu-progress-bg,
.gradeRanking /deep/ .ivu-progress-inner {
  border-radius: 0 !important;
}
.span {
  color: white;
  font-size: 16px;
}
.colorStyle {
  height: 30px;
  line-height: 30px;
  font-weight: bold;
}
</style>
